<template>
    <div class="edit">
            <el-card header="用户信息修改">
            <el-form  :model="formData" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="formData.username"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="formData.age"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="resource">
                    <el-radio-group v-model="formData.sex">
                        <el-radio label="boy"></el-radio>
                        <el-radio label="girl"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="formData.phone"></el-input>
                </el-form-item>
                <el-form-item>
                    <div slot-scope="scope">
                        <el-button @click="save()" type="success">save</el-button>
                        <el-button type="warning" @click="$router.push({name:'ui'})">返回</el-button>
                    </div>
                </el-form-item>
            </el-form>
            </el-card>
    </div>
</template>
<script>
import $ from "jquery";
export default {
  data() {
    return {
      formData: {
        id: this.$route.params.id,
        username: "",
        age: "",
        sex: "",
        phone: ""
      }
    };
  },
  created() {
    this.find();
  },
  methods: {
    find() {
      $.get("http://127.0.0.1:8085/users/find", {id:this.formData.id}).done(res => {
        this.formData = res;
      });
    },
    save() {
      $.post("http://127.0.0.1:8085/users/edit", this.formData).done(() => {
        this.$router.push({ name: "ui" });
      });
    }
  }
};
</script>
<style>
    .edit{
        width:600px;
        margin: 20px auto;
    }
</style>

